/*
 * @Description: 选项按钮组件
 * @Author: buwei.huang
 * @Date: 2019-06-19 18:07:28
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-28 15:35:10
 */
<template>
  <div class="tab_option baseBgColorNoActive flex-h flex-hw">
    <template v-for="(item,index) in tabList">
      <div
        class="item flex-v flex-vc"
        :key="index"
        @click="goToPage(item)"
      >
        <i
          class="icon iconfont"
          :class="item.icon"
        />
        <p class="font">{{item.name}}</p>
      </div>
    </template>
  </div>
</template>
<script>
import { goToPage, detectionGoToPage } from '@/utils/JumpUtils.js'
export default {
  data() {
    return {
      tabList: window.tabList
    }
  },
  methods: {
    goToPage(item) {
      if (item.pluginConfig && item.pluginConfig.name) {
        // 调起插件
        let [name, fuctionName, argument] = [item.pluginConfig.name, item.pluginConfig.fuctionName, item.pluginConfig.arguments]
        if (window[name]) {
          window[name][fuctionName](() => { }, () => { }, ...argument)
        } else {
          console.warn(1111111, name, fuctionName, argument)
        }
      } else {
        // 跳转
        if (item.isNeedLogin) {
          detectionGoToPage(item.goUrl)
        } else {
          goToPage(item.goUrl)
        }
      }
    }
  }
}
</script>
<style>
.tab_option {
  padding: 4px 15px 26px;
}
.tab_option .icon {
  font-size: 38px; /* no */
  padding: 8px;
  color: #fff;
}
.tab_option .font {
  font-size: 11px; /* no */
  color: rgba(255, 255, 255, 1);
  padding-top: 14px;
}
.tab_option .item {
  width: 180px;
  padding-top: 26px;
}
</style>
